<template>
    <van-overlay :show="isShow" @click="closeHandle" :lock-scroll="false">
        <div class="user-box" @click.stop>
            <div class="box-border">
                <div class="box-title">
                    <div><a @click="closeHandle">{{ $t('circle_kg_13') }}</a></div>
                    <div>{{ $t('select_user') }}</div>
                    <div><a :class="{'btn-class': selectMap.size > 0}" @click="changeSelect">{{ $t('circle_kg_14') }}</a></div>
                </div>
                <div>
                    <van-search v-model="search" :placeholder="$t('circle_kg_15')" />
                </div>
                <div class="box-item-list">
                    <van-loading v-if="groupUserList.length === 0" size="50px"/>
<!--                    <van-radio-group v-model="selectId">-->
<!--                        <div class="box-item" v-for="item in catalogList" :key="item.ttId" @click="selectCatalog(item)">-->
<!--                            <div><van-radio :name="item.ttId"></van-radio></div>-->
<!--                            <div>{{ item.ttName }}</div>-->
<!--                        </div>-->
<!--                    </van-radio-group>-->
                    <van-checkbox-group v-model="selectIdList">
                        <van-collapse v-model="activeNames">
                            <van-collapse-item :name="item.id" v-for="(item,index) in groupUserList" :key="item.id">
                                <template slot="title">
                                    <div class="group-title" @click="selectGroup(item, index,false)">
                                        <van-checkbox @click.native.stop="selectGroup(item, index, true)" :name="item.id" style="width: 50px"></van-checkbox>
                                        <span>{{ item.name }}</span>
                                    </div>
                                </template>
                                <van-loading v-if="!item.children || item.children.length === 0" size="50px"/>
                                <div class="box-item" v-for="data in item.children" :key="data.id" @click="selectItem(data)">
                                    <div><van-checkbox :name="data.id"></van-checkbox></div>
                                    <div>{{ data.name }}</div>
                                </div>
                            </van-collapse-item>
                        </van-collapse>
                    </van-checkbox-group>
                </div>
            </div>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
    </van-overlay>
</template>

<script>
import { Toast, Image, Dialog, Checkbox, CheckboxGroup, Search, Tab, Tabs, SwipeCell, Button, Icon, Overlay, Field, Collapse, CollapseItem, Loading } from 'vant';
export default {
    name: 'SelectGroupUser',
    components: {
        vatToast: Toast,
        vanImage: Image,
        vanDialog: Dialog,
        vanCheckbox: Checkbox,
        vanCheckboxGroup: CheckboxGroup,
        vanOverlay: Overlay,
        vanCollapse: Collapse,
        vanCollapseItem: CollapseItem,
        vanLoading: Loading,
        vanSearch: Search
    },
    props: {
        isShow: {
            type: Boolean,
            default: false
        },
        defaultSelectedList: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            selectIdList: [],
            activeNames: [],
            groupUserList: [],
            search: '',
            queryId: 1,
            isLoading: false,
            selectMap: new Map()
        };
    },
    methods: {
        changeSelect() {
            if (!this.isLoading) {
                this.isLoading = true;
                this.$emit('changeMap', this.selectMap);
                let idList = [];
                let objList = [];
                this.selectMap.forEach((value, key) => {
                    idList.push(key);
                    objList.push(value);
                });
                this.$emit('changeIdList', idList);
                this.$emit('changeObjList', objList);
                this.isLoading = false;
                this.closeHandle();
            }
        },
        selectItem(data) {
            this.isLoading = true;
            let exist = this.selectIdList.indexOf(data.id);
            if (exist === -1) {
                this.selectIdList.push(data.id);
                this.selectMap.set(data.id, data);
            } else {
                this.selectIdList.splice(exist, 1);
                this.selectMap.delete(data.id);
            }
            this.isLoading = false;
        },
        selectGroup(data, index, isCheck) {
            if (!this.isLoading) {
                this.isLoading = true;
                if (isCheck) {
                    let exist = this.selectIdList.indexOf(data.id);
                    isCheck = exist === -1;
                } else {
                    if (!data.children || data.children.length === 0) {
                        this.queryId = data.id;
                        this.getGroupUserList(index, isCheck);
                    } else {
                        this.isLoading = false;
                    }
                    return;
                }
                if (!data.children || data.children.length === 0) {
                    this.queryId = data.id;
                    this.getGroupUserList(index, isCheck);
                } else {
                    if (isCheck) {
                        data.children.forEach(item => {
                            let inx = this.selectIdList.findIndex(id => {
                                return id === item.id;
                            });
                            if (inx < 0) {
                                this.selectIdList.push(item.id);
                                this.selectMap.set(item.id, item);
                            }
                        });
                    } else {
                        data.children.forEach(item => {
                            let inx = this.selectIdList.findIndex(id => {
                                return id === item.id;
                            });
                            this.selectIdList.splice(inx, 1);
                            this.selectMap.delete(item.id);
                        });
                    }
                    this.isLoading = false;
                }
                //
                // if (this.selectIdList.length < 10) {
                //
                //
                // }
            }
        },
        closeHandle() {
            if (this.selectMap.size > 0) {
                this.selectMap = new Map();
                this.selectIdList = [];
            }
            //支持同步
            this.$emit('update:isShow', !this.isShow);
            //防止父组件未同步时则抛出事件
            this.$emit('close', !this.isShow);
        },
        getGroupUserList(index, isCheck) {
            this.$axios.get(`/app/api/usergroup/tree_user_group_lazy?id=${this.queryId}`).then(res => {
                if (res.data && res.data.length > 0) {
                    if (index && index !== -1) {
                        this.groupUserList[index].children = res.data;
                        if (isCheck) {
                            res.data.forEach(item => {
                                this.selectIdList.push(item.id);
                                this.selectMap.set(item.id, item);
                            });
                            this.isLoading = false;
                        }
                    } else {
                        this.groupUserList = res.data;
                        this.isLoading = false;
                    }
                }
                this.isLoading = false;
            });
        }
    },
    watch: {
        isShow() {
            if (this.isShow && this.groupUserList.length === 0) {
                this.getGroupUserList();
            }
        },
        defaultSelectedList() {
            this.selectIdList = [].concat(this.defaultSelectedList);
        }
    }
};
</script>

<style scoped lang="less">
    /deep/.van-overlay {
        z-index: 999;
    }
    .user-box {
        background: #fff;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 450px;
        border-radius: 16px 16px 0 0;
        .box-border {
            padding: 0 15px;
            .box-title {
                height: 48px;
                display: flex;
                align-items: center;
                &>div:first-child{
                    flex: 1;
                    &>a {
                        padding-right: 10px;
                    }
                }
                &>div:last-child {
                    flex: 1;
                    text-align: right;
                    &>a {
                        padding-left: 10px;
                        color: #ACACAC;
                    }
                }
                &>div:nth-child(2) {
                    flex: 2;
                    text-align: center;
                }
                .btn-class {
                    color: #000 !important;
                }
            }
            /deep/.van-search {
                padding: 0 0 10px 0;
            }
            .box-item-list {
                overflow-y: auto;
                max-height: 400px;
                .group-title {
                    display: flex;
                    align-items: center;
                }
                /deep/.van-loading {
                    text-align: center;
                }
                .box-item {
                    display: flex;
                    align-items: center;
                    height: 50px;
                    &>div:first-child {
                        width: 50px;
                    }
                    &>div:last-child {
                        flex-grow: 1;
                    }
                }
            }
        }
    }
</style>
